<template>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold mb-4">我的项目</h1>
      <p class="text-xl text-gray-600">
        这里展示我参与开发的一些项目，每个项目都有其独特的挑战和学习经验
      </p>
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div v-for="project in projects" :key="project.id" class="card">
        <div class="aspect-video bg-gray-200 rounded-lg mb-4">
          <!-- 项目图片占位符 -->
          <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500 text-white">
            {{ project.name.charAt(0) }}
          </div>
        </div>
        
        <h3 class="text-xl font-semibold mb-2">{{ project.name }}</h3>
        <p class="text-gray-600 mb-4">{{ project.description }}</p>
        
        <div class="flex flex-wrap gap-2 mb-4">
          <span 
            v-for="tech in project.technologies" 
            :key="tech"
            class="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded"
          >
            {{ tech }}
          </span>
        </div>
        
        <div class="flex space-x-4">
          <a 
            :href="project.github" 
            target="_blank"
            class="text-gray-600 hover:text-gray-900"
          >
            GitHub
          </a>
          <a 
            :href="project.demo"
            target="_blank" 
            class="text-blue-500 hover:text-blue-700"
          >
            演示
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const projects = [
  {
    id: 1,
    name: '电商平台',
    description: '功能完整的B2C电商平台，支持商品管理、订单处理、支付集成等',
    technologies: ['Vue.js', 'Node.js', 'MongoDB', 'Stripe'],
    github: 'https://github.com',
    demo: 'https://demo.com'
  },
  {
    id: 2,
    name: '任务管理系统',
    description: '团队协作任务管理工具，支持实时协作、文件共享、进度跟踪',
    technologies: ['React', 'TypeScript', 'PostgreSQL', 'Socket.io'],
    github: 'https://github.com',
    demo: 'https://demo.com'
  },
  {
    id: 3,
    name: '个人博客',
    description: '基于Nuxt.js的静态博客，支持Markdown、SEO优化、响应式设计',
    technologies: ['Nuxt.js', 'Markdown', 'TailwindCSS', 'Netlify'],
    github: 'https://github.com',
    demo: 'https://demo.com'
  },
  {
    id: 4,
    name: '天气应用',
    description: '实时天气查询应用，支持全球城市、7天预报、天气图表',
    technologies: ['Vue.js', 'Weather API', 'Chart.js', 'PWA'],
    github: 'https://github.com',
    demo: 'https://demo.com'
  },
  {
    id: 5,
    name: '聊天应用',
    description: '实时聊天应用，支持私聊、群聊、文件传输、消息加密',
    technologies: ['React', 'Node.js', 'Redis', 'WebRTC'],
    github: 'https://github.com',
    demo: 'https://demo.com'
  },
  {
    id: 6,
    name: '数据可视化',
    description: '企业级数据可视化平台，支持多种图表类型、实时数据更新',
    technologies: ['D3.js', 'Python', 'Flask', 'PostgreSQL'],
    github: 'https://github.com',
    demo: 'https://demo.com'
  }
]
</script>